---
id: password-input
title: Password Input
description: A component that allows users to enter secure text like (passwords and api keys)
---

<ComponentPreview id="PasswordInput" />

## Anatomy

To set up the password input correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="password-input" />

## Examples

Learn how to use the `PasswordInput` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Autocomplete

Use the `autoComplete` prop to manage autocompletion in the input.

- `new-password` — The user is creating a new password.
- `current-password` — The user is entering an existing password.

<Example id="autocomplete" />

### Root Provider

Use the `usePasswordInput` hook to create the password input store and pass it to the `PasswordInput.RootProvider`
component. This allows you to have maximum control over the password input programmatically.

<Example id="root-provider" />

### Field

Here's an example of how to use the `PasswordInput` component with the `Field` component.

<Example id="with-field" />

### Ignoring password managers

Use the `ignorePasswordManager` prop to ignore password managers like 1Password, LastPass, etc. This is useful for
non-login scenarios (e.g., "api keys", "secure notes", "temporary passwords")

> **Currently, this only works for 1Password, LastPass, Bitwarden, Dashlane, and Proton Pass.**

<Example id="ignore-password-manager" />

### Controlled visibility

Use the `visible` and `onVisibilityChange` props to control the visibility of the password input.

<Example id="controlled-visibility" />

### Strength meter

Combine the `PasswordInput` with a password strength library to show visual feedback about password strength. This
example uses the [`check-password-strength`](https://www.npmjs.com/package/check-password-strength) package to provide
real-time strength validation.

<Example id="strength-meter" />

## API Reference

### Props

<ComponentTypes id="password-input" />

### Context

These are the properties available when using `PasswordInput.Context`, `usePasswordInputContext` hook or
`usePasswordInput` hook.

<ContextType id="password-input" />
